<template>
  <div class="fast-appoint-wrapper" :style="{ height: height-15+'px'}">

    <top-bar :title="topTitle"></top-bar>

    <div class="other-info" style="margin-top: 20px;">
      <h4 class="title">其他信息</h4>

      <div class="vaccination-group">
        <popup-picker title="儿童姓名"
                      show-name
                      :data="childList"
                      v-model="childValue"
                      @on-change="childChange"
                      placeholder="请选择儿童">
        </popup-picker>
      </div>

      <div class="vaccination-group">
        <x-input title="性别"
                 v-model="sexValue"
                 disabled></x-input>
      </div>
      <div class="vaccination-group">
        <x-input title="出生日期"
                 v-model="birthValue"
                 disabled></x-input>
      </div>

      <div class="vaccination-group">

        <x-input title="接种点选择"
                 v-model="selectPoint.text"
                 @click.native="popupPoint=true"
                 placeholder="选择接种点"
                 :show-clear="false" disabled></x-input>

      </div>

      <div class="datetime-group">
        <popup-picker
          title="接种时间"
          :data="inoculateArrayList"
          v-model="inoculateArrayValue"
          @on-change="inoculateArrayChange"
          placeholder="请选择接种时间"></popup-picker>
        <img src="../../../static/images/login/calendar.png" class="calendar-img">
      </div>

      <div class="specific-time-group">
        <popup-picker
          title="具体时间"
          show-name
          :data="detailsArrayList"
          v-model="detailsArrayValue"
          @on-change="detailsArrayChange"
          placeholder="请选择具体时间"></popup-picker>
      </div>

    </div>

    <div class="select-vaccine-box">
      <div class="vaccine-list-tab" v-if="selectBoolean==true">
        <div class="vaccine-list">
          <ul>
            <li v-for="(item,index) in vaccineMonthList" :key="index" >
              <div class="top">
                <!-- 判断是否免费 false免费true自费-->
                <a class="tag tag-expense" v-if="item.ispay==0">自费</a>
                <a class="tag tag-expense" style="background:#5e81f9;" v-else>免费</a>
                <!--canselect 0必打，2替代，1自选-->
                <a class="tag tag-replace" v-if="item.canselect==0" style="background:#ff4445;">必打</a>
                <a class="tag tag-replace" v-else-if="item.canselect==2" style="background:#a1b7d2;">替代</a>
                <a class="tag tag-replace" v-else-if="item.canselect==1">自选</a>

                <a class="detail-tag" @click="vaccineDeatils(item)">详情</a>
              </div>
              <div class="v-center">
                <div class="left">
                  <p class="vaccine-title">{{item.name}}</p>
                </div>
                <div class="right">
                  <a class="appoint-btn"   @click="appoint(item)" v-if="item.companyid==null">预约</a>
                  <a class="appoint-btn"  style="background: #8CC6E3"  @click="appointCancel(item)" v-else>取消预约</a>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div :style="selectBoolean==true?'height: 20px;':'height: 200px;'" style="background: #fff;"></div>
    <div class="fast-bottom">
      <div class="remind-text" v-if="selectBoolean==false">
        <p class="text1">快速预约，</p>
        <p class="text2">不用选择疫苗，到医院后医生帮助选择疫苗。</p>
      </div>
      <div class="fast-btn">
        <!-- :disabled="disabledConfirmeTwo"-->
        <x-button @click.native="confirmation" >确认选择</x-button>
      </div>
    </div>

    <!--选择疫苗提供商-->
    <div v-transfer-dom>
      <popup v-model="companyPopup" position="bottom" class="switch-popup company-popup">
        <div class="header">
          <h4>选择疫苗提供商</h4>
          <img src="../../../static/images/record/close.png" class="close" @click="companyPopup=false">
        </div>
        <div class="con" style="height: 400px;overflow: scroll">
          <ul>
            <li v-for="(item,index) in companyList" :key="index"
                :class="companyIndex==index?'active':''" @click="companyClick(item,index)">
              <div><span>公司：</span>{{item.companyname}}</div>
              <div>
                <span>计价单位：</span>{{item.unit}}
                <span style="margin-left:10px;">价格：</span>{{item.pirce}}
                <span style="margin-left:10px;">类型：</span>{{item.type}}
              </div>
              <img src="../../../static/images/appoint/vaccine-select.png" class="vaccine-select-img" v-if="companyIndex==index">
            </li>
          </ul>
        </div>
      </popup>
    </div>


    <div v-transfer-dom>
      <popup v-model="popupPoint" position="bottom" height="80%" class="record-popup">
        <div class="select-con">
          <picker :data='provinceList' v-model='provinceValue' @on-change='provinceChange' :fixed-columns="2"></picker>
          <picker :data='cityList' v-model='cityValue' @on-change='cityChange' :fixed-columns="2"></picker>
          <picker :data='countryList' v-model='countryValue' @on-change='countryChange' :fixed-columns="2"></picker>
        </div>
        <div class="content-list">
          <ul v-if="pointArray.length>0">
            <li  v-for="(item,index) in pointArray"
                 :class="item.value==selectFirstPoint.value?'active':''"
                 :key="index" @click="pointClick(item)">{{item.text}}</li>
          </ul>
          <div class="no-data" v-else>
            暂无数据
          </div>
        </div>
        <div class="popup-btn-con">
          <x-button @click.native="popupSure" class="popup-btn">确定</x-button>
        </div>

      </popup>
    </div>
  </div>
</template>

<script>
  import { XInput,XButton,PopupPicker,Datetime ,XSwitch,Tab, TabItem,Popup,TransferDom ,Picker} from 'vux';
  import TopBar from '@/components/top';
  import {unique1} from '../../utils/common'

  export default {
    name: "fast-appoint",
    metaInfo () {
      return {
        title: '预约接种'
      }
    },
    data(){
      return {
        selectBoolean: true,
        height:document.documentElement.clientHeight,
        companyPopup:false,
        companyList:[],

        pointList:[],
        pointValue:[],
        userId:sessionStorage.getItem('userId'),
        babyId:sessionStorage.getItem('childId'),

        monthList:[],
        vaccineMonthList:[],
        companyIndex:null,
        selectCompanyone:{},
        selectCompanyTwo:{},

        childList:[],
        childValue:[],
        childId:null,
        form:{
          userid:sessionStorage.getItem('userId'),
          babyid:sessionStorage.getItem('childId'),
          inocomid:'',   // 接种单位Id
          appointinotime:'',  // 选择的具体时间段(08:00~18:00)
          appointtime:'', //选择的日期(2019-07-19)
          money:'0',
          planid:[],
          vacId:[]
        },

        vaccineMonthArray:[],

        vacArrayId:'',

        inoculateList:[],
        inoculateArrayList:[],
        inoculateArrayValue:[],

        detailsArrayList:[],
        detailsArrayValue:[],

        topTitle:'预约接种',

        pointArray:[],
        selectPoint:{
          text:''
        },
        popupPoint:false,
        selectFirstPoint:{},

        provinceList:[],
        provinceValue:['11'],

        cityList:[],
        cityValue:['98'],

        countryList:[],
        countryValue:[],

        disabledConfirme:true,

        currentProvider:null,

        selectList:[],
        selectappoint:[],
        selectArray:[],

        sexValue:'',
        birthValue:''
      }
    },
    mounted(){
      this.getData();

      this.province();
    },
    watch:{
      companyPopup(oldVal,newVal){
        if(oldVal!==newVal){
          this.companyIndex=null;
        }
      }
    },
    computed:{
      vaccineDisabled(){
        if(this.selectPoint.text!==''){
          return false;
        }
        return true;
      },
      disabledConfirmeTwo(){
        if(this.selectBoolean==false){
          if(this.selectPoint.text=='' || this.inoculateArrayValue.length==0 || this.detailsArrayValue.length==0){
            return true
          }
        }else{
          //this.form.planid==''
          if(this.selectPoint.text=='' || this.inoculateArrayValue.length==0 || this.detailsArrayValue.length==0 || this.form.vacId==''){
            return true
          }
        }

        return false
      }
    },
    methods:{
      onItemClick(item,index){
        for(let i in this.vaccineMonthArray){
          if(i==item){
            this.vaccineMonthList=this.vaccineMonthArray[i];
          }
        }
      },
      vaccineDeatils(val){
        this.$router.push({path: '/vaccinedetails',query:{vaccinecoding:val.vaccinecoding}})
      },
      confirmation(){
        let that=this;
        let formdata=Object.assign(this.form);

        if(that.selectBoolean==false){
          if(formdata.inocomid==''){
            this.$vux.toast.text('请选择接种点', 'middel')
          }else if(formdata.appointtime==''){
            this.$vux.toast.text('请选择接种时间', 'middel')
          }else if(formdata.appointinotime==''){
            this.$vux.toast.text('请选择具体时间', 'middel')
          }else{
            delete formdata.planid;
            delete formdata.vacId;
            this.$api.post('/vaccinationReservation/generateOrder',formdata).then( (res)=> {
              if(res.data.result==0){
                that.$router.push({path: '/appointment'})
              }else{
                this.$vux.toast.text(res.data.msg, 'middel')
              }
            })
          }
        }else{
          if(formdata.inocomid==''){
            this.$vux.toast.text('请选择接种点', 'middel')
          }else if(formdata.appointtime==''){
            this.$vux.toast.text('请选择接种时间', 'middel')
          }else if(formdata.appointinotime==''){
            this.$vux.toast.text('请选择具体时间', 'middel')
          }else if(formdata.vacId.length==0){
            this.$vux.toast.text('请选择疫苗', 'middel')
          }else if(formdata.planid.length==0){
            this.$vux.toast.text('请选择疫苗供应商', 'middel')
          }else{
            that.$router.push({path: '/confirmation'});
            sessionStorage.setItem('formdata',JSON.stringify(formdata))
            sessionStorage.setItem('selectList',JSON.stringify(this.selectList))
          }
        }

      },
      getData(){
        let that=this;
        let userInfo=JSON.parse(sessionStorage.getItem('userInfo'));
        this.sexValue=userInfo.sex;
        this.birthValue=userInfo.birthday;

        let children=JSON.parse(sessionStorage.getItem('children'));

        let childListArray=[];
        for(let i in children){
          childListArray.push({
            name:children[i].name,
            value:children[i].id+''
          })
        }
        this.childList=[childListArray];

        this.childId=sessionStorage.getItem('childId');
        for(let i in childListArray){
          if(childListArray[i].value==this.childId){
            this.childValue=[childListArray[i].value]
          }
        }

      },
      pointChange(val){
        let that=this;
        this.form.inocomid=val[0];
        let babyId=sessionStorage.getItem('childId');


        this.$api.get(`/vaccinationReservation/findAppointmentTime/${val[0]}/${babyId}/1`).then(function (res) {
          if(res.data.result==0){
            that.inoculateList=res.data.obj;
            let array=[];
            for(let i in res.data.obj){
              array.push({
                name:res.data.obj[i].time,
                value:res.data.obj[i].companyId
              })
            }
            that.inoculateArrayList=[array]
          }
        })

      },
      appoint(val){
        if(this.selectPoint.value){
          this.$api.get(`/vaccinationReservation/findSupplierByVaccine/${val.vaccinecoding}/`+this.selectPoint.value).then( (res)=> {
            if(res.data.result==0){
              this.companyList=res.data.obj;
            }
          })
          this.companyPopup=true;
          this.selectappoint=val;
          this.vacArrayId=val.id;
        }else{
          this.$vux.toast.show({
            text: '请选择接种点',
            type:'text',
          })
        }


      },
      companyClick(val,index){
        this.selectList.push(Object.assign(this.selectappoint,{companyId:val.id},{vprice:val.pirce}));
        this.companyPopup=false;

        for(let i in this.vaccineMonthList){
          for(let j in this.selectList){
            if(this.vaccineMonthList[i].id==this.selectList[j].id){
              this.vaccineMonthList[i].companyid=val.id;
              this.selectArray.push(Number(this.selectList[j].id))
            }
          }
        }
        /*this.form.planid.push(Number(val.id));
        this.form.vacId=unique1(this.selectArray);*/

        this.form.vacId.push(Number(val.id));
        this.form.planid=unique1(this.selectArray);
      },
      appointCancel(val){
        for(let i in this.vaccineMonthList){
          if(this.vaccineMonthList[i].id==val.id){
            this.vaccineMonthList[i].companyid=null;
            /* this.form.vacId.splice(this.form.vacId.indexOf(val.id),1);
             this.form.planid.splice(this.form.planid.indexOf(this.vaccineMonthList[i].companyid),1);*/
            this.selectArray.splice(this.selectArray.indexOf(val.id),1);

            this.form.planid.splice(this.form.planid.indexOf(val.id),1);
            this.form.vacId.splice(this.form.vacId.indexOf(this.vaccineMonthList[i].companyid),1);
          }
        }
        for(let i in this.selectList){
          if(this.selectList[i].id==val.id){
            this.selectList.splice(this.selectList.indexOf(val.id),1)
          }
        }
      },
      vaccineChange(val){
        if(val==false){
          // this.form.planid='';
          this.form.vacId=[];
        }
      },
      //接种时间
      inoculateArrayChange(val){
        let objectInfo={};
        this.detailsArrayList.length=0;
        this.detailsArrayValue.length=0;

        for(let i in this.inoculateList){
          if(this.inoculateList[i].time==val[0]){
            objectInfo=this.inoculateList[i];
          }
        }

        this.$api.post('/vaccinationReservation/findDateConcreteTime',{
          companyId:this.form.inocomid,
          modeTime:objectInfo.modeTime,
          time:objectInfo.time
        }).then( (res)=> {
          if(res.data.result==0){
            if(res.data.obj){
              let array=[];
              for(let i in res.data.obj){
                array.push({
                  name:res.data.obj[i].time,
                  value:res.data.obj[i].time
                })
              }
              if(array.length>0){
                this.detailsArrayList=[array]
              }
            }else{
              this.$vux.toast.text('暂无具体时间', 'middle')
            }

          }
        })
        this.form.appointtime=objectInfo.time;

      },
      detailsArrayChange(val){
        this.form.appointinotime=val[0];
      },
      province(){
        this.$api.post('/systemPick/findAllCities',{
          type:'PROVINCE',
          parentId:'zh'
        }).then( (res)=> {
          let data=res.data.obj;
          let array=[{
            name:'请选择',
            value:''
          }];
          for(let i in data){
            array.push({
              name:data[i].name,
              value:data[i].id
            })
          }
          this.provinceList=[array];
        })
      },
      provinceChange(val){
        if(val[0]){
          this.$api.post('/systemPick/findAllCities',{
            type:'CITY',
            parentId:val[0]
          }).then( (res)=> {
            let data=res.data.obj;
            let array=[{
              name:'请选择',
              value:''
            }];
            for(let i in data){
              array.push({
                name:data[i].name,
                value:data[i].id
              })
            }
            this.cityList=[array];
          })
          this.$api.get(`/systemPick/queryInoculatePoints/${val[0]}`).then( (res)=> {
            if(res.data.result==0){
              this.pointArray=res.data.obj;
            }
          })
        }
      },
      cityChange(val){
        if(val[0]){
          this.$api.post('/systemPick/findAllCities',{
            type:'COUNTRY',
            parentId:val[0]
          }).then( (res)=> {
            let data=res.data.obj;
            let array=[{
              name:'请选择',
              value:''
            }];
            for(let i in data){
              array.push({
                name:data[i].name,
                value:data[i].id
              })
            }
            this.countryList=[array];
          })
          this.$api.get(`/systemPick/queryInoculatePoints/${val[0]}`).then( (res)=> {
            if(res.data.result==0){
              this.pointArray=res.data.obj;
            }
          })
        }
      },
      countryChange(val){
        if(val[0]){
          this.$api.get(`/systemPick/queryInoculatePoints/${val[0]}`).then( (res)=> {
            if(res.data.result==0){
              this.pointArray=res.data.obj;
            }
          })
        }
      },
      pointClick(val){
        this.selectFirstPoint=val;
      },
      childChange(val){
        let that=this;
        this.$api.post('/userHandle/changeBaby',{
          id:this.userId,
          selectBaby:val[0]
        }).then( (res)=> {
          sessionStorage.setItem('childId',val[0]);
          this.form.babyid=val[0];
          let userList=JSON.parse(sessionStorage.getItem('children'));
          for(let i in userList){
            if(userList[i].id==val[0]){
              sessionStorage.setItem('userInfo',JSON.stringify(userList[i]));

              this.sexValue=userList[i].sex;
              this.birthValue=userList[i].birthday;
            }
          }

        })

        that.$api.get(`/vaccinationReservation/getDoctorPlan/${val[0]}`).then(function (res) {
          if(res.data.result==0){
            that.vaccineMonthList=res.data.obj;
          }else{
            that.vaccineMonthList=[]
            that.$vux.toast.show({
              text: res.data.msg,
              type:'text',
            })
          }
        })



      },
      popupSure(){
        this.selectPoint=this.selectFirstPoint;
        this.popupPoint=false;
        this.form.inocomid=this.selectFirstPoint.value;
        this.detailsArrayValue.length=0;
        this.selectArray=[];
        this.form.vacId=[];
        this.form.planid=[];

        let that=this;
        let babyId=sessionStorage.getItem('childId');


        this.$api.get(`/vaccinationReservation/findAppointmentTime/${this.selectFirstPoint.value}/${babyId}/1`).then(function (res) {
          if(res.data.result==0){
            that.inoculateList=res.data.obj;
            let array=[];
            for(let i in res.data.obj){
              /*array.push({
                name:res.data.obj[i].time,
                value:res.data.obj[i].companyId
              })*/
              array.push(res.data.obj[i].time)
            }
            that.inoculateArrayList=[array]
          }
        })
      }
    },
    components: {
      XInput,
      XButton,
      PopupPicker,
      Datetime,
      XSwitch,
      Tab,
      TabItem,
      Popup,
      TopBar,
      Picker
    },
    directives: {
      TransferDom
    }
  }
</script>

<style lang="scss">
  .fast-appoint-wrapper{
    position: relative;
    height: 100%;
    background: #fff;
    .weui-btn_disabled.weui-btn_default{
      opacity: 0.8;
    }
    .vux-x-input.disabled .weui-input{
      color:#333;
      -webkit-text-fill-color:#333;
      &::-webkit-input-placeholder {
        color:rgba(173,173,173,1);
        font-size: 14px;
        -webkit-text-fill-color:rgba(173,173,173,1);
      }
    }
    .other-info{
      background:rgba(255,255,255,1);
      box-shadow:-1px 0px 19px 2px rgba(50,51,51,0.06);
      border-radius:10px;
      padding:15px;
      margin:0 15px;
      .title{
        font-size:15px;
        color:rgba(38,38,38,1);
        font-weight: normal;
        border-left:2px solid  #F56363;
        padding-left:4px;
        margin-bottom: 20px;
      }
      .weui-label{
        color:rgba(38,38,38,1);
        font-size:14px;
        width:85px!important;
      }
      .weui-input{
        color:rgba(38,38,38,1);
        font-size: 14px;
        text-align: right;
        height: 30px;
        line-height: 30px;
        &::-webkit-input-placeholder {
          color:rgba(173,173,173,1);
          font-size: 14px;
        }
      }
      .vux-datetime{
        p{
          color:rgba(38,38,38,1);
          font-size:14px;
        }
      }
      .vux-cell-placeholder{
        color:rgba(173,173,173,1);
        font-size: 14px;
      }
      .vux-cell-value{
        color:rgba(38,38,38,1);
        font-size: 14px;
      }
      .weui-cell_access .weui-cell__ft:after{
        border-color:#C7C7C7;
        border-width: 1px 1px 0 0;
      }
      .datetime-group{
        position: relative;
        border-bottom: 1px solid #EEEEEE;
        .weui-cell_access .weui-cell__ft:after{
          border-width:0;
        }
        .weui-cell_access .weui-cell__ft{
          padding-right: 24px;
          height: 30px;
          line-height: 30px;
        }
        .calendar-img{
          width:18px;
          height:22px;
          position: absolute;
          top:15px;
          right:12px;
        }
      }
      .name-group{
        border-bottom: 1px solid #EEEEEE;
      }
      .vaccination-group{
        border-bottom: 1px solid #EEEEEE;
      }
      .specific-time-group{
        .weui-cell_access .weui-cell__ft{
          padding-right: 22px;
          height: 30px;
          line-height: 30px;
        }
      }
    }
    .select-vaccine-box{
      margin-top:10px;
      .weui-label{
        color:rgba(38,38,38,1);
        font-size:14px;
      }
      .vaccine-list-tab{
        .vux-tab .vux-tab-item{
          background-size: 100% 0px;
          background:#fff;
        }
      }
      .vaccine-list{
        padding:20px 0 80px;
        background: #fff;
        ul{
          margin:0 15px;
          li{
            background:rgba(255,255,255,1);
            box-shadow:0px 0px 10px 1px rgba(50,51,51,0.06);
            border-radius:10px;
            margin-bottom: 10px;
            padding:10px 15px 20px;
            .top{
              border-bottom: 1px solid #EEEEEE;
              padding-bottom: 10px;
              .tag{
                width:39px;
                height:24px;
                line-height: 24px;
                text-align: center;
                display: inline-block;
                background:rgba(245,180,110,1);
                font-size:12px;
                font-family:PingFang-SC-Regular;
                font-weight:400;
                color:rgba(255,255,255,1);
                &-replace{
                  background:#7BCB54;
                }
              }
              .detail-tag{
                float: right;
                font-size:14px;
                font-family:PingFang-SC-Regular;
                color:rgba(218,74,74,1);
              }
            }
            .v-center{
              display: flex;
              margin-top: 15px;
              .left{
                flex: 1;
                margin-right: 5px;
                .vaccine-title{
                  font-size:15px;
                  font-family:PingFang-SC-Regular;
                  color:rgba(38,38,38,1);
                  line-height: 20px;
                }
                .dose{
                  font-size:12px;
                  font-family:PingFang-SC-Regular;
                  color:rgba(122,122,122,1);
                  margin-top: 6px;
                }
              }
              .right{
                flex: 0 0 74px;
                .appoint-btn{
                  display: inline-block;
                  width:74px;
                  height:30px;
                  line-height: 30px;
                  text-align: center;
                  background:rgba(245,99,99,1);
                  border-radius:10px;
                  font-size:14px;
                  font-family:PingFang-SC-Regular;
                  font-weight:400;
                  color:rgba(255,255,255,1);
                  &-cancel{
                    background:#8CC6E3;
                    margin-top: 10px;
                  }
                }
              }
            }
          }
        }
      }
    }
    .fast-bottom{
      position: fixed;
      background: #fff;
      bottom: 0;
      width:100%;
      .remind-text{
        margin-bottom: 20px;
        p{
          font-size:14px;
          color:rgba(122,122,122,1);
          text-align: center;
        }
        .text1{
          margin-bottom: 5px;
        }
      }
      .fast-btn{
        .weui-btn_default{
          background:#F56363;
          color:rgba(255,255,255,1);
          font-size:14px;
          height: 54px;
          line-height: 54px;
          border-radius: 0;
        }
      }
    }
  }
  .company-popup{
    .con{
      padding: 30px 15px 0;
      .vaccine-name{
        font-size:15px;
        font-family:PingFang-SC-Bold;
        font-weight:600;
        color:rgba(245,99,99,1);
        margin:20px 0 15px;
      }
      ul{
        li{
          background:rgba(247,247,247,1);
          border-radius:10px;
          padding:15px;
          margin-bottom: 15px;
          position: relative;
          div{
            font-size:14px;
            font-family:PingFang-SC-Regular;
            font-weight:400;
            color:#262626;
            margin-bottom: 15px;
            &:last-child{
              margin-bottom: 0;
            }
            span{
              color:#7A7A7A;
            }
            .dose-v{
              margin-left: 70px;
            }
          }
          &.active{
            background: #fff;
            border: 1px solid #F56363;
            .vaccine-select-img{
              position: absolute;
              right:0;
              top:0;
              width: 35px;
              height: 35px;
            }
          }
        }
      }
    }
    .popup-footer{
      .weui-btn{
        height:50px;
        line-height: 50px;
        background:rgba(245,99,99,1);
        font-size:15px;
        font-family:PingFang-SC-Bold;
        font-weight:bold;
        color:rgba(255,255,255,1);
      }
      .weui-btn_default:not(.weui-btn_disabled):active{
        background:rgba(245,99,99,1);
        color:rgba(255,255,255,1);
      }
    }
  }
  .vaccination-group{
    .vux-popup-picker-select{
      height: 30px;
      line-height: 30px;
      .vux-popup-picker-placeholder{
        color:rgba(173,173,173,1);
        font-size: 14px;
      }
      .vux-popup-picker-value{
        color:rgba(38,38,38,1);
        font-size: 14px;
        text-align: right;
        height: 30px;
      }
    }
  }
  .datetime-group{
    .vux-datetime{
      p{
        font-size:14px;
        font-family:PingFang-SC-Regular;
        font-weight:400;
        color:rgba(38,38,38,1);
      }
      .vux-cell-placeholder{
        color:rgba(173,173,173,1);
        font-size: 14px;
      }
      .vux-cell-primary{
        padding-right: 26px;
        height: 30px;
        line-height: 30px;
      }
    }
  }
  .record-popup{
    z-index:999!important;
    background:#fff!important;
    .select-con{
      display: flex;
      .vux-picker{
        flex: 1;
      }
    }
    .content-list{
      margin-bottom: 30px;
      max-height: 200px;
      overflow: scroll;
      ul{
        padding:30px 20px;
        max-height:140px ;
        overflow-y: scroll;
        li{
          font-size: 14px;
          height: 30px;
          line-height: 30px;
          color: #262626;
          padding: 5px;
          &.active{
            background: #d6d4d4;
            color: #fff;
            border-radius: 2px;
          }
        }
      }
      .no-data{
        text-align: center;
        color: #333;
        padding-top:80px;
      }
    }
    .popup-btn-con{
      position: absolute;
      bottom: 30px;
      width:100%;
      .popup-btn{
        width:80%;
        margin:0 auto;
        background: #F56363;
        color: white;
        font-size: 15px;
        height: 46px;
        line-height: 46px;
        border-radius: 20px;
      }
      .weui-btn_default:not(.weui-btn_disabled):active{
        background: #F56363;
        color: white;
      }
    }
  }
  .select-vaccine{
    .vux-label-desc{
      font-size: 10px;
      color: #F56363;
    }
  }
</style>
